<template>
	<view class="lq">
		<!-- 卡券类型切换 -->
		<!-- <view class="kqqh">
			<view>会员优惠券</view>
			<view :class="show==true ? 'activs':''"  @click="show=true">
				优惠券
			</view>
			<view :class="show==false ? 'activs':''" @click="show=false">
				领券码
			</view>
		</view> -->
		
		<view class="kqqh">
			<view class="lqkd" v-for="(item,index) in lxlist" :class="activ==index ? 'activs':''"  @click="listactive(index)" :key="index">
				{{item.name}}
			</view>
			<view class="lqkd" :class="activ==2 ? 'activs':''" @click="listactive(2)" >
				领券码
			</view>
		</view>
		<view class=""  v-show="show">
			<view class="lqlist"  v-for="(item,index) in couponList" :class=" item.status_name!='已领取' ?'':'qucbj'" :key="index">
				<view class="ljlq">
					¥<text>{{item.amount}}</text>
					<view class=""  v-if="item.status_name!='已领取'" @click="lingqu(item.id)">
						立即领取
					</view>
					<view class="" v-else >
						已领取
					</view>
				</view>
				<view class="ljlqright">
					<view class="lptit">
						{{item.name}}
					</view>
					<view class="lptit1">
						{{item.description}}
					</view>
					<view class="lptit2">
						有效期至：{{item.usetimeend | date('yyyy-mm-dd')}}
					</view>
				</view>
			</view>
			<shopro-empty marginTop="300rpx" v-if="isEmpty" :image="IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无此类优惠券"></shopro-empty>
			
		</view>
		
		<view class="linqu" v-show="!show">
			<view class="shotiel" >
				请输入优惠券码领取
			</view>
			<input type="text" placeholder="请输入优惠券码领取" value=""  v-model="inputs"/>
			<view class="buttons" @click="tijiao">
				确认提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputs:'',//提取码
				show:true,
				list:[
				
				],//可领取的优惠券
				activ:0,
				couponList:[],
				isEmpty:true,
				IMG_URL:this.$IMG_URL,
				stateCurrent:0,
				lxlist:[
					{name:"会员优惠券"},
					{name:"优惠券"},
					
					// {name:"已过期"}
				],
			}
		},
		onLoad() {
			this.stateCurrent = 4
			this.getCouponList()
		},
		methods: {
			listactive(index){
				let _this=this
				switch(index) {
				     case 0:
						_this.stateCurrent = 4
						this.show = true
				        break;
				     case 1:
				       _this.stateCurrent = 0
					   this.show = true
				        break;
					case 2:
						this.show = false
						// _this.stateCurrent = 3
					   break;
				     default:
				} 
				_this.activ=index
				_this.getCouponList()
			},
			// 获取待领卡券
			getCouponList() {
				let that = this;
				that.$http('coupons.list', {
					type: that.stateCurrent
				}).then(res => {
					if (res.code === 1) {
						that.couponList = res.data;
						that.isEmpty = !that.couponList.length;
					}
				});
			},
			// 领取优惠券
			lingqu(ids){
				let _this=this
				_this.$http(
					'coupons.get',
					{
						id: ids
					},
					// '领取中...'
				).then(res => {
					if (res.code === 1) {
						_this.$u.toast('领取成功');
						_this.getCouponList()
					}
				});
				
			},
			//领取码优惠券
			tijiao(){
				let _this=this
				_this.$http(
					'common.lingqu',
					{
						code: _this.inputs
					},
					// '领取中...'
				).then(res => {
					if (res.code === 1) {
						_this.$u.toast('领取成功');
						_this.getCouponList()
					}
				});
			}
		}
	}
</script>

<style scoped>
	.kqqh{
		display: flex;
		justify-content: space-between;
		background: #FEFFFE;
		margin: 0 -32rpx ;
		margin-bottom: 50rpx;
		
	}
	.kqqh>view{
		width: 50%;
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 80rpx;
	}
	.shotiel{
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 110px;
		text-align: center;
	}
	.linqu{
		text-align: center;
	}
	.linqu>input{
		margin: 50rpx auto 179rpx;
		width: 500rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 1rpx solid #A9A9A9;	
	}
	.buttons{
		width: 500rpx;
		height: 80rpx;
		background: #FF9A33;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 0 auto;
	}
	.lq{
		/* background-color: #F9F9F9; */
		padding: 0 32rpx;
		margin-top: 0rpx;
	}
	.lqlist{
		background-image: url("https://s1.ax1x.com/2022/03/25/qtHl1P.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 42rpx 0 50rpx;
	}
	.lqlist{
		display: flex;
		justify-content: space-between;
		margin-bottom: 34rpx;
	}
	.lqlist>view:first-of-type{
		width: 40%;
		text-align: center;
	}
	.ljlq{
		font-size: 48rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.ljlq>text {
		font-size: 60rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.ljlq>view{
		font-size: 24rpx;
		font-weight: 500;
		color: #FF9A33;
		width: 160rpx;
		height: 42rpx;
		background: #ffffff;
		border-radius: 21rpx;
		line-height: 42rpx;
		margin: 32rpx auto 0;
	}
	.lptit{
		font-size: 35rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.lptit1{
		font-size: 24rpx;
		font-weight: 400;
		color: #ffffff;
		margin: 13rpx 0 20rpx;
	}
	.lptit2{
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 310rpx;
		height: 42rpx;
		background: rgb(255,255,255,0.2);
		border-radius: 18rpx;
		line-height: 42rpx;
		margin: 0 auto;
	}
	.ljlqright{
		width: 60%;
		text-align: center;
	}
	.kqlx{
		display: flex;
		justify-content: space-around;
		height: 80rpx;
		background: #FFFFFF !important;
		padding: 0 !important;
		margin-bottom: 49rpx;
	}
	
	.lqkd{
		font-size: 30rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333333;
	}
	.activs{
		font-weight: bold;
		color: #FF9A33 !important;
	}
	.qucbj{
		background-image: url("https://s1.ax1x.com/2022/03/25/qYYoDA.png");
	}
	.qucbj .ljlq{
		font-size: 48rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.qucbj .ljlq>text{
		font-size: 60rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.qucbj .ljlq>view{
		background: #FFFFFF !important;
		color: #999999;
	}
	.qucbj .lptit{
		font-size: 42rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.qucbj .lptit1{
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.qucbj .lptit2{
		font-size: 24rpx;
		color: #FFFFFF;
	}
	
	
	
</style>
